<template>
  <div class="hdgl-edit-step-2">
    <a-button icon="a-icon-plus" type="primary" @click="mpSelectorVisible=true">
      添加公众号
    </a-button>
    <a-table
      rowKey="mpId"
      :pagination="false"
      :columns="columns"
      :data-source="mpList"
      class="mt-20"
      style="width: 100%;">
      <template slot="limitCountTitle">
        <a-tooltip
          class="item"
          effect="dark"
          content="当公众号的新增粉丝超过该阈值的时候，该公众号不再参与此活动"
          placement="top">
          <div>
            <span>风控阈值</span>
            <a-icon type="question-circle"/>
          </div>
        </a-tooltip>
      </template>
      <span slot="limitCount" slot-scope="text, record">
        新增
        <a-input-number
          v-model="record.limitCount"
          style="width: 100px;"
          :min="1"
          :max="9999"/>
        粉丝
      </span>
      <template slot="weightTitle">
        <a-tooltip class="item" effect="dark" content="活动的参与粉丝将按照公众号的比例进行分配，比例大小在1-100之间" placement="top">
          <div>
            <span>流量分配</span>
            <a-icon type="question-circle"/>
          </div>
        </a-tooltip>
      </template>
      <span slot="weight" slot-scope="text, record">
        <a-input-number
          v-model="record.weight"
          controls-position="right"
          style="width: 90px;"
          @change="getRadio"
          :min="1"
          :max="100"/>
      </span>
      <span slot="updatedBy" slot-scope="text, record">
        <a-button type="link" @click="remove(record)">移除</a-button>
      </span>
    </a-table>
    <a-modal
      title="选择公众号"
      v-model="mpSelectorVisible"
      width="500px">
      <a-select style="width: 100%;" :value="selectedMpId" @change="mpChange">
        <a-select-option
          v-for="mp in allMpList"
          :key="mp.mpId">{{ mp.mpName }}
        </a-select-option>
      </a-select>
      <span slot="footer" class="dialog-footer">
        <a-button @click="mpSelectorVisible = false">取 消</a-button>
        <a-button type="primary" @click="selectMp">确 定</a-button>
      </span>
    </a-modal>
  </div>
</template>

<script>
    import { keepN } from '../../../../utils'
    import MP_API from '../../../../../api/mp/mp'

    export default {
        name: 'HdglEditStep2',
        props: {
            model: {
                type: Object,
                default: () => {
                }
            }
        },
        data () {
            return {
                mpSelectorVisible: false,
                allMpList: [],
                selectedMpId: null,
                ready: false,
                mpList: [],
                columns: [
                    {
                        title: '公众号',
                        dataIndex: 'mpName'
                    },
                    {
                        title: '类型',
                        dataIndex: 'mpType'
                    },
                    {
                        scopedSlots: { title: 'limitCountTitle', customRender: 'limitCount' }
                    },
                    {
                        scopedSlots: { title: 'weightTitle', customRender: 'weight' }
                    },
                    {
                        title: '占比',
                        dataIndex: 'percent'
                    },
                    {
                        title: '操作',
                        dataIndex: 'updatedBy',
                        scopedSlots: { customRender: 'updatedBy' }
                    }
                ]
            }
        },
        watch: {
            mpList () {
                this.getRadio()
            }
        },
        mounted () {
            this.getAllMpList()
        },
        methods: {
            mpChange (data) {
                this.selectedMpId = data
            },
            getRadio () {
                let total = 0
                this.mpList.forEach(item => {
                    total += item.weight
                })
                this.mpList.forEach(item => {
                    item.percent = this.formatData(item.weight, total)
                })
            },
            formatData (weight, total) {
                if (total === 0) {
                    return 0 + '%'
                } else {
                    return keepN(weight / total * 100, 0) + '%'
                }
            },
            remove (row) {
                this.mpList = this.mpList.filter(item => item.mpId !== row.mpId)
                this.model.mpList = this.mpList
                this.allMpList.push(row)
            },
            getAllMpList () {
                this.mpList = this.model.mpList
                this.ready = false
                // 初始化自己的公众号账户
                MP_API.listByCurrentMpList().then(res => {
                    if (res.length === 0) {
                        return
                    }
                    this.allMpList = []

                    // 如果新建默认选择第一个公众号
                    res.forEach(item => {
                        // 取出已经使用了的公众号
                        const exist = this.mpList.find(mp => Number.parseInt(mp.mpId) === item.mpId)
                        if (!exist) {
                            this.allMpList.push(item)
                        }
                    })
                    this.ready = true
                }).catch(err => {
                    console.error(err)
                })
            },
            /**
             * 添加选中的公众号到活动公众号
             */
            selectMp () {
                if (this.allMpList.length === 0) {
                    this.$message.error('没有公众号，无法添加')
                    return
                }
                let mpType = null
                const selectedMp = this.allMpList.filter(item => item.mpId === this.selectedMpId)[0]
                if (Number.parseInt(selectedMp.serviceTypeInfo) === 2) {
                    mpType = '服务号'
                } else {
                    mpType = '订阅号'
                }
                this.mpList.push({
                    mpAppId: selectedMp.mpAppId,
                    mpId: selectedMp.mpId,
                    mpName: selectedMp.mpName,
                    mpType: mpType,
                    weight: 10,
                    limitCount: 100
                })
                // 过滤已经使用的公众号
                this.allMpList = this.allMpList.filter(item => item.mpId !== this.selectedMpId)
                this.selectedMpId = null
                this.mpSelectorVisible = false
                this.model.mpList = this.mpList
            },
            check () {
                // 检查公众号至少有一个
                if (this.mpList.length < 1) {
                    throw new Error('公众号至少要配置一个')
                }
            }
        }
    }
</script>

<style scoped>

</style>
